<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据浏览 - 共享充电宝数据仓库</title>
    
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- 基础样式 -->
    <style>
        [v-cloak] { display: none; }
    </style>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="./styles/main.css">
    <style>
        /* 数据浏览页面样式 */
        .data-browser-container {
            padding: 20px;
            max-width: 100%;
            overflow-x: auto;
        }
        
        .data-browser-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
        }
        
        .data-browser-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .data-browser-title h1 {
            margin: 0;
            font-size: 24px;
            color: #fff;
        }
        
        .data-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .data-info-item {
            background: rgba(255, 255, 255, 0.15);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            color: #fff;
        }
        
        .back-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s;
        }
        
        .back-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .data-table-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 20px;
            overflow-x: auto;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            color: #fff;
        }
        
        .data-table th {
            background: rgba(255, 255, 255, 0.2);
            padding: 12px 15px;
            text-align: left;
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .data-table td {
            padding: 10px 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .data-table tr:hover {
            background: rgba(255, 255, 255, 0.05);
        }
        
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }
        
        .pagination-info {
            color: #fff;
            font-size: 14px;
        }
        
        .pagination-controls {
            display: flex;
            gap: 10px;
        }
        
        .pagination-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .pagination-btn:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .page-size-selector {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #fff;
        }
        
        .page-size-selector select {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .error-message {
            background: rgba(255, 59, 48, 0.2);
            color: #fff;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .error-icon {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="data-browser-app" v-cloak>
        <!-- 页面头部 -->
        <header class="dashboard-header">
            <div class="header-content">
                <h1 class="title">
                    <i class="icon">📊</i>
                    共享充电宝数据仓库
                </h1>
                <div class="header-info">
                    <span class="time">{{ currentTime }}</span>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="data-browser-container">
            <!-- 数据浏览头部 -->
            <div class="data-browser-header">
                <div class="data-browser-title">
                    <h1>{{ dataTypeInfo.title }}</h1>
                    <div class="data-info">
                        <span class="data-info-item">{{ pagination.total_records }} 条记录</span>
                        <span class="data-info-item">{{ columns.length }} 个字段</span>
                        <span class="data-info-item">{{ fileName }}</span>
                    </div>
                </div>
                <button @click="goBack" class="back-btn">
                    ← 返回分析页面
                </button>
            </div>

            <!-- 错误信息 -->
            <div v-if="error" class="error-message">
                <span class="error-icon">⚠️</span>
                <span>{{ error }}</span>
            </div>

            <!-- 数据表格 -->
            <div class="data-table-container">
                <table class="data-table" v-if="records.length > 0">
                    <thead>
                        <tr>
                            <th v-for="column in columns" :key="column">{{ column }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(record, index) in records" :key="index">
                            <td v-for="column in columns" :key="column">{{ record[column] }}</td>
                        </tr>
                    </tbody>
                </table>
                <div v-else-if="!loading" style="text-align: center; padding: 30px; color: #fff;">
                    暂无数据
                </div>
            </div>

            <!-- 分页控制 -->
            <div class="pagination" v-if="records.length > 0">
                <div class="pagination-info">
                    显示 {{ (pagination.page - 1) * pagination.page_size + 1 }} - 
                    {{ Math.min(pagination.page * pagination.page_size, pagination.total_records) }} 
                    条，共 {{ pagination.total_records }} 条
                </div>
                <div class="pagination-controls">
                    <button 
                        @click="changePage(1)" 
                        class="pagination-btn"
                        :disabled="pagination.page === 1">
                        首页
                    </button>
                    <button 
                        @click="changePage(pagination.page - 1)" 
                        class="pagination-btn"
                        :disabled="pagination.page === 1">
                        上一页
                    </button>
                    <button 
                        @click="changePage(pagination.page + 1)" 
                        class="pagination-btn"
                        :disabled="pagination.page === pagination.total_pages">
                        下一页
                    </button>
                    <button 
                        @click="changePage(pagination.total_pages)" 
                        class="pagination-btn"
                        :disabled="pagination.page === pagination.total_pages">
                        末页
                    </button>
                </div>
                <div class="page-size-selector">
                    <span>每页显示:</span>
                    <select v-model="pageSize" @change="changePageSize">
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="200">200</option>
                        <option value="500">500</option>
                    </select>
                </div>
            </div>

            <!-- 加载指示器 -->
            <div v-if="loading" class="loading-overlay">
                <div class="loading-spinner"></div>
            </div>
        </main>

        <!-- 页面底部 -->
        <footer class="dashboard-footer">
            <p>&copy; 2025 共享充电宝数据仓库项目 - 数据浏览</p>
        </footer>
    </div>

    <!-- Vue应用脚本 -->
    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            const { createApp, ref, onMounted, onUnmounted } = Vue;
            
            // API基础配置
            const API_BASE_URL = 'http://localhost:5000';
            
            // 创建Vue应用
            const app = createApp({
                setup() {
                    // 响应式数据
                    const currentTime = ref('');
                    const records = ref([]);
                    const columns = ref([]);
                    const pagination = ref({
                        page: 1,
                        page_size: 100,
                        total_records: 0,
                        total_pages: 0
                    });
                    const loading = ref(true);
                    const error = ref('');
                    const dataType = ref('');
                    const fileName = ref('');
                    const pageSize = ref(100);
                    
                    // 数据类型信息
                    const dataTypeInfo = ref({
                        title: '数据浏览',
                        icon: '📊'
                    });
                    
                    // 时间更新定时器
                    let timeInterval = null;
                    
                    // 更新当前时间
                    const updateTime = () => {
                        const now = new Date();
                        currentTime.value = now.toLocaleString('zh-CN', {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit',
                            second: '2-digit'
                        });
                    };
                    
                    // 获取URL参数
                    const getUrlParam = (param) => {
                        const urlParams = new URLSearchParams(window.location.search);
                        return urlParams.get(param);
                    };
                    
                    // 加载数据
                    const loadData = async () => {
                        loading.value = true;
                        error.value = '';
                        
                        try {
                            const response = await fetch(`${API_BASE_URL}/api/data/browse/${dataType.value}?page=${pagination.value.page}&page_size=${pagination.value.page_size}`);
                            
                            if (!response.ok) {
                                throw new Error(`HTTP错误: ${response.status}`);
                            }
                            
                            const result = await response.json();
                            
                            if (result.success) {
                                records.value = result.data.records;
                                columns.value = result.data.columns;
                                pagination.value = result.data.pagination;
                                fileName.value = result.data.file_name;
                                
                                // 更新数据类型信息
                                updateDataTypeInfo();
                            } else {
                                throw new Error(result.error || '加载数据失败');
                            }
                        } catch (e) {
                            console.error('数据加载错误:', e);
                            error.value = `数据加载失败: ${e.message}`;
                            records.value = [];
                            columns.value = [];
                        } finally {
                            loading.value = false;
                        }
                    };
                    
                    // 更新数据类型信息
                    const updateDataTypeInfo = () => {
                        const typeMap = {
                            'user': {
                                title: '用户数据浏览',
                                icon: '👥'
                            },
                            'order': {
                                title: '订单数据浏览',
                                icon: '📋'
                            },
                            'region': {
                                title: '地区数据浏览',
                                icon: '🗺️'
                            },
                            'time': {
                                title: '时间数据浏览',
                                icon: '⏰'
                            }
                        };
                        
                        dataTypeInfo.value = typeMap[dataType.value] || {
                            title: '数据浏览',
                            icon: '📊'
                        };
                    };
                    
                    // 切换页码
                    const changePage = (page) => {
                        pagination.value.page = page;
                        loadData();
                        // 滚动到顶部
                        window.scrollTo(0, 0);
                    };
                    
                    // 切换每页显示数量
                    const changePageSize = () => {
                        pagination.value.page_size = parseInt(pageSize.value);
                        pagination.value.page = 1; // 重置到第一页
                        loadData();
                    };
                    
                    // 返回分析页面
                    const goBack = () => {
                        window.location.href = 'ai-analysis.html';
                    };
                    
                    // 组件挂载时
                    onMounted(() => {
                        // 获取URL参数中的数据类型
                        const type = getUrlParam('type');
                        if (!type) {
                            error.value = '未指定数据类型';
                            loading.value = false;
                            return;
                        }
                        
                        dataType.value = type;
                        
                        // 更新时间
                        updateTime();
                        timeInterval = setInterval(updateTime, 1000);
                        
                        // 加载数据
                        loadData();
                    });
                    
                    // 组件卸载时
                    onUnmounted(() => {
                        if (timeInterval) {
                            clearInterval(timeInterval);
                        }
                    });
                    
                    return {
                        currentTime,
                        records,
                        columns,
                        pagination,
                        loading,
                        error,
                        dataType,
                        fileName,
                        dataTypeInfo,
                        pageSize,
                        changePage,
                        changePageSize,
                        goBack
                    };
                }
            });
            
            // 挂载Vue应用
            app.mount('#data-browser-app');
        });
    </script>
</body>
</html> 